<template>
  <div class="ExchangeRecord">
    <div>
      <search :dataList="dataList" :type="1"/>
    </div>
    <div class="cont">
      <el-table
        :data="data"
        v-loading="loading"
        :empty-text="emptyText()"
        style="width: 100%">
        <!-- 兑换 -->
        <el-table-column
          :label="$t('swap.s1')"
          width="150">
          <template slot-scope="scope">
            <span>
              {{ scope.row.fromCoin }}
            </span>
            <i class="iconfont icon-huaban124 colorThis"></i>
            <span>
              {{ scope.row.toCoin }}
            </span>
          </template>
        </el-table-column>
        <!-- 时间 -->
        <el-table-column
          :label="$t('swap.s28')"
          prop="accountNo"
          width="170">
          <template slot-scope="scope">
            <span class="text">
              {{scope.row.createTime | dateFormatBIHM}}
            </span>
          </template>
        </el-table-column>
        <!-- 数量 -->
        <el-table-column
          :label="$t('swap.s25')"
          width="160">
          <template slot-scope="scope">
            <span class="text">
              {{ scope.row.fromQuantityStr }} {{ scope.row.fromCoin }}
            </span>
          </template>
        </el-table-column>
        <!-- 兑换价格 -->
        <el-table-column
          :label="$t('swap.s48')">
          <template slot-scope="scope">
            <span class="text">
              {{ scope.row.priceStr }} {{ scope.row.toCoin }}/{{ scope.row.fromCoin }}
            </span>
          </template>
        </el-table-column>
        <!-- 到账数量 -->
        <el-table-column
          :label="$t('swap.s40')">
          <template slot-scope="scope">
            <span class="text">
              {{ scope.row.toQuantityStr }} {{ scope.row.toCoin }}
            </span>
          </template>
        </el-table-column>
        <!-- 手续费 -->
        <el-table-column
          :label="$t('swap.s26')">
          <template slot-scope="scope">
            <span class="text">
              {{ scope.row.feesStr }} {{ scope.row.fromCoin }}
            </span>
          </template>
        </el-table-column>
        <!-- TrxID -->
        <el-table-column
          label="TrxID">
          <template slot-scope="scope">
            <a class="fn-text1 colorThis" target="_blank" :href="`https://bloks.io/tx/${scope.row.trxId}`">
              {{ scope.row.trxId }}
            </a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagebox center ptb">
        <el-pagination
          @size-change="handleSizeChange"
          :current-page="formData.currPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="formData.pageSize"
          @prev-click="handlePrevPage"
          @next-click="handleNextPage"
          layout="prev, pager, next, sizes">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/utils/bus';
import Search from './Search'; // 搜索框

export default {
  name: 'ExchangeRecord', // 兑换记录
  data() {
    return {
      loading: false,
      dataMarket: {
        activeType: 1,
        coinCode: '', // 模糊查询
        pairId: '', // 交易对ID
        type: '', // 类型：1-存币；2-取币
        queryMonths: '', // 查询时间：1-近一个月；3-近三个月
        fromCoin: '', // 支付币种
        toCoin: '', // 得到币种
      },
      data: [], // 数据
      formData: {
        currPage: 1,
        pageSize: 10,
      },
    }
  },
  components: {
    Search
  },
  props: {
    dataList: Array,
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen(val) {
        if (!val) return;
        this.handleGetOrderList();
      },
      deep: true,
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.handleGetOrderList();
    // 监听筛选数据
    this.handleChange();
  },
  beforeDestroy() {
    Bus.$off('handleChange');
  },
  methods: {
    // 空数据
    emptyText() {
      const scat = this.$store.state.app.scatter;
      if (scat && !scat.identity) {
        return this.$t('jy.sqhlook');
      }
      return this.$t('myWallet.noData');
    },
    // 筛选
    handleChange() {
      Bus.$on('handleChange', (val) => {
        this.dataMarket = val;
        if (this.dataMarket.activeType === 1) {
          this.handleGetOrderList('search');
        }
      })
    },
    handleGetOrderList(type) { // 查询订单记录列表信息
      const scat = this.$store.state.app.scatter;
      if (scat && !scat.identity) return;
      this.loading = true;
      if (type === 'search') {
        this.formData.currPage = 1;
      }
      const params = {
        currPage: this.formData.currPage, // 当前页码
        pageSize: this.formData.pageSize, // 每页数量
        fromCoin: this.dataMarket.fromCoin, // 支付币种
        toCoin: this.dataMarket.toCoin, // 得到币种
        queryMonths: this.dataMarket.queryMonths,
      };
      this.$http.post('/aiswap/querySwapTradePage', params).then((res) => {
        this.loading = false;
        if (res.code !== 0) {
          return
        }
        const items = res.page.list;
        if (items.length === 0 && this.formData.currPage !== 1) {
          this.$message.warning(this.$t('order.noMoreData'));
          this.formData.currPage -= 1;
          return;
        }
        this.data = [];
        if (res.page && items.length) {
          this.data = [...this.data, ...items]
        }
      })
    },
    // 上一页
    handlePrevPage() {
      // if (this.formData.currPage === 1) return;
      this.formData.currPage -= 1;
      this.handleGetOrderList();
    },
    // 下一页
    handleNextPage() {
      this.formData.currPage += 1;
      this.handleGetOrderList();
    },
    // 去第几页
    handleCurrentChange(page) {
      this.formData.currPage = page;
      this.handleGetOrderList();
    },
    // 改变分页总条数
    handleSizeChange(val) {
      this.formData.currPage = 1;
      this.formData.pageSize = val;
      this.handleGetOrderList();
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.ExchangeRecord {
  background: #fff;

  .cont {
    padding: 0 10px;

    /deep/ .el-table {
      td, th.is-leaf {
        border: 0;
      }

      &:before {
        display: none;
      }

      th {
        padding-bottom: 5px;
      }

      th .cell {
        padding-top: 5px;
        padding-bottom: 5px;
        background: #f3f3f3;
        color: #9B9B9B;
        font-weight: normal;
        font-size: 12px;
      }

      td {
        padding-top: 15px;
        padding-bottom: 15px;
      }

      .fn-text1 {
        padding-right: 30px;
      }
    }
  }
}


.theme-1B1D27 {
  .head {
    background: $-black2 !important;
    border-color: $-black2 !important;
  }
  .cont {
    background: $-black1 !important;

    /deep/ .el-table {
      color: $-opacity8;

      th .cell {
        background: $-black2 !important;
      }
    }
  }
}
</style>
